<template>
  <div >
    <!-- 顶部栏 -->
    <van-sticky :offset-top="0">


    <van-nav-bar title="影院" left-text="北京">
      <template #left>
        <p style="color: blue" @click="pushRouterCity">{{ cityName }}</p>
        <van-icon name="arrow-down" />
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="pushRouterSearch"/>
      </template>
    </van-nav-bar>
    <!-- 下拉栏 -->
<van-dropdown-menu active-color="#ff0033" >
  <van-dropdown-item :title="value1" ref="itemMenus">
       <div class="ul-class-menus" >
         <p class="p-class-menus " @click="searchMenuAll" >全城 </p>
         <p @click="searchMenuOne(item)" v-for="(item,index) in blockList" :key="index+'1' " class="p-class-menus">{{item}} </p>
       </div>
  </van-dropdown-item>
    <van-dropdown-item v-model="value2" :options="option2" @change="changeOption2" />
    <van-dropdown-item v-model="value3" :options="option3" @change="changeOption3"/>
</van-dropdown-menu>
</van-sticky>
    <!-- 这里往下是所有的影院信息列表 -->

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="height:100%; width:100%;"
      v-if="cinemalist.length != 0"
    >
      <van-cell
        v-for="(item, index) in list"
        :key="item + index"
        @click="pushRouterCinemaToFilm(item.cinemaId)"
      >
        <template #title>
          <span class="custom-title">{{ item.name }}</span>
        </template>
        <template #label>
          <span class="custom-title">{{ item.address }}</span>
        </template>
        <template #default>
          <div class="custom-price">&yen;{{ item.lowPrice / 100 }}起</div>
          <div class="custom-title">距离未知</div>
        </template>
      </van-cell>

      
    </van-list>
  </div>
</template>

<script>
import CinemaList from "../request-get/cinema-request.js";
import CinemaListNumber from "../request-get/cinema-request-tik1.js";

// ticketFlag=1的是app订票
// ticketFlag=2的是前台兑换
export default {
  name: "cinemas",
  data() {
    return {
      // 区块数组
      blockList:[],
      // 所有影院信息
      cinemalist: [],
      value1: "全城",
      value2: 0,
      value3: 0,
      switch1: false,
      switch2: false,
      option2: [
        { text: "APP订票", value: 0 },
        { text: "前台兑换", value: 1 },
      ],
      option3: [
        { text: "最近去过", value: 0 },
        { text: "离我最近", value: 1 },
      ],
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      flag: 0,
      // 内存
      setTime:0
    };
  },
  computed: {
    cityName() {
      for (let i = 0; i < this.$store.state.cityList.length; i++) {
        if (this.$store.state.cityId == this.$store.state.cityList[i].cityId) {
          return this.$store.state.cityList[i].name;
        }
      }
    },
  },
  created() {
    try{
     import("../store/index.js")
      .then((res) => {
        return CinemaListNumber(res.default.state.cityId,1);
      })
      .then((res1) => {
        
        // console.log(res1, "这是res1");
        //  将cinemas数组存起来
        this.$store.commit("setCinemaList", res1);
        for (let i = 0; i < res1.length; i++) {
          this.cinemalist.push(res1[i]);
        }
          let set01=new Set([])
          for( let item  of  this.cinemalist){ 
            set01.add(item.districtName)
          }
          this.blockList =Array.from(set01)
      });
      this.list.splice(0,this.list.length);



    }catch(err){


console.log(err);

    }
 
  },
  methods: {
    changeOption2(){
    
      import("../store/index.js")
      .then((res) => {
        return CinemaListNumber(res.default.state.cityId,this.value2+1);
      })
      .then((res1) => {
        // 当存在cinema的时候
        if(res1){
        this.cinemalist.splice(0,this.cinemalist.length);
        // console.log(res1, "这是res1");
        //  将cinemas数组存起来
        this.$store.commit("setCinemaList", res1);
        for (let i = 0; i < res1.length; i++) {
          this.cinemalist.push(res1[i]);
        }
          let set01=new Set([])
          for( let item  of  this.cinemalist){ 
            set01.add(item.districtName)
          }
          this.blockList =Array.from(set01);
          this.list.splice(0,this.list.length);
          this.onLoad();

        }else{
          this.cinemalist.splice(0,this.list.length);
          this.list.splice(0,this.list.length);
          // this.onLoad();
        }
    
      });
    },
     changeOption3(){
    
      import("../store/index.js")
      .then((res) => {
        return CinemaListNumber(res.default.state.cityId,this.value3+1);
      })
      .then((res1) => {
        // 当存在cinema的时候
        if(res1){
        this.cinemalist.splice(0,this.cinemalist.length);
        // console.log(res1, "这是res1");
        //  将cinemas数组存起来
        this.$store.commit("setCinemaList", res1);
        for (let i = 0; i < res1.length; i++) {
          this.cinemalist.push(res1[i]);
        }
          let set01=new Set([])
          for( let item  of  this.cinemalist){ 
            set01.add(item.districtName)
          }
          this.blockList =Array.from(set01);
          this.list.splice(0,this.list.length);
          this.onLoad();

        }else{
          this.cinemalist.splice(0,this.list.length);
          this.list.splice(0,this.list.length);
          // this.onLoad();
        }
    
      });

      
    },

    searchMenuAll(){
      this.list.splice(0,this.list.length)
      for( let i=0; i<this.cinemalist.length;i++){
           this.list.push(this.cinemalist[i])
      }
      this.value1="全城"
      this.$refs.itemMenus.toggle();
  
    },
    searchMenuOne(e){
      // this.$refs.itemMenus.title=e
      this.list.splice(0,this.list.length)
      for( let i=0; i<this.cinemalist.length;i++){
         if(this.cinemalist[i].districtName==e){
           this.list.push(this.cinemalist[i])
         }
      }
      this.value1=e
      this.$refs.itemMenus.toggle();
    },
    // 已修改
    onLoad() {
     this.setTime= setTimeout(() => {
       let core=this.list.length;
      //  console.log(this.cinemalist,"settime");
       
       for (let i = 0; i <  10; i++) {
        /*先判断有没有超出范围*/
          if ((core+i )>= this.cinemalist.length) {
              this.finished = true;
              break;
          }
          this.list.push(this.cinemalist[core+i]);
      }
        this.loading = false;
        if (this.list.length >= this.cinemalist.length) {
          this.finished = true;
        }
         },500)
      
    },
    
    // 跳转并且传值
    pushRouterCinemaToFilm(e) {
      /*这个e就是传过来的cinemaId*/
      // 我想了想还是写在这里 需要根据你点击的哪个影院来决定
      this.$store.commit("setCinemaId", e);
      // console.log(this.$store.state.cinemaList);
      // console.log(this.$store.state.cinemaId);

      this.$router.push({
        path: "CinemaList",
        query: {
          // CinemaId:e,
          k: Math.random() * 12345 + 1,
        },
      });
    },
    // 重新跳转到选城市的页面
    pushRouterCity() {
      this.$router.push({
        path: "searchCityList",
      });
    },
    // 搜索
      pushRouterSearch(){
          this.$router.push({
            path:"searchCinemas"
          })


    }
  },
  mounted(){
    //  console.log(this.$refs);
  },
  beforeDestroy(){
    clearTimeout(this.setTime)
  }
};
</script>

<style>
.ul-class-menus{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  padding-left: 10px;
  
}
.p-class-menus{
  
      width: 65px;
      border: 1px solid rgba(210,214,220,0.5);
      margin-right: 5px;
      display: inline-block;
      border: 1px solid;
      /* color: #ff5f16; */
      border-radius: 3px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
}
.p-class-menus:active{
  background-color: red
}

.van-cell__label {
    margin-top: 4px;
    color: #969799;
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}
.custom-price{
  color:#FF5F16

}
</style>
